<style lang="less" rel="stylesheet/less" type="text/less">
.index-box {
  padding-top: 20px;
  padding-left: 50px;
}
</style>
<template>
  <div class="index-box">
    <Row type="flex" justify="start">
      <i-col push="1" style="width:400px;">
        <Form
          ref="formValidate"
          :model="formValidate"
          :rules="ruleValidate"
          :label-width="labelWidth(145,170)"
          name="create-form"
        >
          <Form-item label="充值金额" prop="amount">
            <InputNumber
              :min="0"
              v-model="formValidate.amount"
              placeholder="请输入充值金额"
              name="create-amount"
            />
          </Form-item>

          <!-- 备注 -->
          <Form-item label="备注" prop="subject">
            <i-input
              v-model="formValidate.subject"
              placeholder="请输入备注"
              name="create-subject"
              type="text"
            />
          </Form-item>

          <!-- 按钮 -->
          <Form-item>
            <Button type="primary" name="create__submit" @click="handleSubmit('formValidate')">充值</Button>
            <Button type="warning" style="margin-left: 8px" @click="handleReset('formValidate')">重置</Button>
          </Form-item>
        </Form>
      </i-col>
    </Row>
  </div>
</template>
<script>
import labelWidthMixin from "../../../labelWidthMixin";

export default {
  name: "RechargeCreate",
  mixins: [labelWidthMixin],
  data() {
    const validateSubject = (rule, value, callback) => {
      if (!value) {
        return callback(new Error("备注不能为空!"));
      }
      if (/\s/.test(value)) {
        callback(new Error("不能输入空格"));
      } else {
        callback();
      }
    };
    const validateAmount = (rule, value, callback) => {
      if (!value) {
        return callback(new Error("金额不能为空!"));
      }
      if (
        !/^(([1-9][0-9]*)|(([0]\.\d{1,2}|[1-9][0-9]*\.\d{1,2})))$/.test(value)
      ) {
        callback(new Error("金额不能低于分位"));
      } else {
        callback();
      }
    };
    return {
      token: "",
      formValidate: {
        amount: 0,
        subject: ""
      },
      ruleValidate: {
        // 验证表单数据规则
        amount: [
          {
            required: true,
            validator: validateAmount,
            type: "number",
            trigger: "blur,change"
          }
        ],
        subject: [
          {
            validator: validateSubject,
            required: true,

            trigger: "blur,change"
          }
        ]
      }
    };
  },
  created() {
    this.token = sessionStorage.getItem("token");
  },
  methods: {
    /**
     * 重置表单
     * @param  {string} name {表单的ref}
     * @return {undefined}
     */
    handleReset(name) {
      this.$refs[name].resetFields();
    },

    /**
     * 提交表单
     * @param  {string} name {表单上的ref值}
     * @return {undefined}
     */
    handleSubmit(name) {
      if (this.formValidate.amount === 0) {
        this.$Message.error("充值金额不能为零!");
      } else {
        this.$refs[name].validate(valid => {
          if (valid) {
            this.formDataCreate();
          } else {
            this.$Message.error("填写的信息有误");
          }
        });
      }
    },

    /**
     *
     * 手动拼接表单数据
     */
    formDataCreate() {
      const new_object = {
        token: this.token,
        amount: this.formValidate.amount,
        subject: this.formValidate.subject
      };

      this.$emit("rechargeCreate", new_object);
    }
  }
};
</script>
